<template>
  <div class="userInfo">
    <router-link
      v-if="isLogin"
      :to="{ name: 'self-info', params: { userId: this.userInfo.userId } }"
    >
      <el-avatar :src="userInfo.avatar" size="large">{{ firstChar }}</el-avatar>
    </router-link>
    <el-avatar size="large" v-else @click.native="popLoginDialog"
      >登录</el-avatar
    >
    <div v-if="isLogin" class="userInfoDetail">
      <div class="userInfoDetailContainer">
        <div class="username">{{ userInfo.nickname }}</div>
        <div>
          <ul class="counts">
            <router-link
              :to="{
                name: 'followings',
                params: { userId: this.userInfo.userId },
              }"
              custom
              v-slot="{route}"
            >
              <li class="counts-item" @click="$router.push(route)" title="关注">
                <span class="number">{{ userInfo.followingCount }}</span>
                <span class="item-name">关注</span>
              </li>
            </router-link>
            <router-link
              :to="{
                name: 'fans',
                params: { userId: this.userInfo.userId },
              }"
              custom
              v-slot="{route}"
            >
            <li class="counts-item" @click="$router.push(route)" title="粉丝">
              <span class="number">{{ userInfo.fansCount }}</span>
              <span class="item-name">粉丝</span>
            </li>
          </router-link>
          <router-link
              :to="{
                name: 'postList',
                params: { userId: this.userInfo.userId },
              }"
              custom
              v-slot="{route}"
            >
            <li class="counts-item" @click="$router.push(route)" title="动态">
              <span class="number">{{ userInfo.postCount }}</span>
              <span class="item-name">文章</span>
            </li>
          </router-link>
          </ul>
        </div>
        <div class="nav-item logout-item" @click="logout" title="退出登录">
          <li class="el-icon-s-release"></li>
          <span>退出登录</span>
        </div>
        <router-link
          tag="div"
          class="nav-item info-center"
          :to="{ name: 'self-info', params: { userId: this.userInfo.userId } }"
          title="个人中心"
        >
          <li class="el-icon-user"></li>
          <span>个人中心</span>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { mapMutations, mapState } from "vuex";
import userApi from "@/axios/userApi";
import statusCode from "@/commons/statusCode";
export default {
  computed: {
    ...mapState("user", { userInfo: "info", isLogin: "isLogin" }),

    firstChar() {
      if (!this.userInfo.avatar) return this.userInfo.nickname.charAt(0);
    },
  },
  methods: {
    ...mapMutations(["popLoginDialog", "closeLoginDialog"]),
    logout() {
      this.$store.commit("user/logout");
      userApi.logout();
      this.$router.push("/");
    },
  },
  mounted() {
    // // this.popLoginDialog()
    // this.$store.state.user.isLogin = true;
    // this.$store.commit("user/login", { username: "b123", nickname: "xixi" });
  },
};
</script>

<style lang="less" scoped>
@import "@/assets/less/common.less";
.userInfo {
  position: relative;
  line-height: @line-height;
  cursor: pointer;

  &:hover .el-avatar {
    transform: translateY(15px);
    scale: 2;
  }
  &:hover .userInfoDetail {
    z-index: 1999;
    opacity: 1;
    visibility: visible;
  }
  .el-avatar {
    position: relative;
    vertical-align: middle;
    line-height: 33px;
    font-size: 15px;
    transition: 0.3s ease;
    z-index: 2000;
  }
  .userInfoDetail {
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s ease;
    color: @regularText;
    position: absolute;
    top: 100%;
    width: 300px;
    overflow: hidden;
    border-radius: 10px;
    margin-left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 5px #909399;
    .username {
      text-align: center;
    }
    .counts {
      margin-top: 10px;
      display: flex;
      justify-content: space-around;
      padding-bottom: 5px;
      border-bottom: 1px solid #909399;
      & > .counts-item {
        display: flex;
        flex-direction: column;
        line-height: 30px;
        text-align: center;
        .number {
          color: @primaryText;
        }

        .item-name {
          font-size: 14px;
        }
      }
    }
    .nav-item {
      display: flex;
      justify-content: space-around;
      margin-top: 15px;
      border-radius: 5px;
      padding: 10px;

      line-height: 30px;
      &:hover {
        color: @primaryText;
        background: @borderBase;
      }
      li:before {
        line-height: 30px !important;
      }
    }
  }

  .userInfoDetailContainer {
    padding: 30px;
    // background: red;
  }
}
</style>